$(function(){
    $('.list-item').on('click',function () {
        $(this).children('ul').toggle();
    });
    $('.item').on('mouseover',function () {
        $(this).find('.icon-pencil').css('display','block');
        $(this).find('.icon-remove').css('display','block');
    }).on('mouseout',function () {
        $(this).find('.icon-pencil').css('display','none');
        $(this).find('.icon-remove').css('display','none');
    });
    initEvent();
    $('.icon .basic-right').on('click',function () {
        $('.basic-form').stop(true).slideToggle(200);
        $(this).toggleClass('glyphicon-chevron-down');
    });
    $('.icon .basic-wrong').on('click',function () {
        $('.basic').stop(true).slideToggle(200);
    });
    $('.icon .custom-right').on('click',function () {
        $('.custom-form').stop(true).slideToggle(200);
        $(this).toggleClass('glyphicon-chevron-down');
    });
    $('.icon .custom-wrong').on('click',function () {
        $('.custom').stop(true).slideToggle(200);
    });
});

//初始化提示内容的颜色
function initEvent() {
    $('input.holder').each(function () {
        var $this = $(this), holder = $this.data('holder');
        if (holder) {
            $this.css('color', '#a9a9a9').val(holder);
        }
    });
    //获取焦点时设置内容的颜色和值为空
    $(document).off('focus', 'input.holder').on('focus', 'input.holder', function () {
        var $this = $(this);
        if ($this.val() === $this.data('holder')) {
            $this.css('color', 'black').val('');
        }
    });
    //失去焦点后还原提示内容
    $(document).off('focusout', 'input.holder').on('focusout', 'input.holder', function () {
        var $this = $(this);
        if ($.trim($this.val()) === '') {
            $this.css('color', '#a9a9a9').val($this.data('holder'));
        }
    });
}